
<template>
  <div>
    <el-table
        border
        :data="eventConfigTable"
        tooltip-effect="dark"
        height="290px"
        size="small"
        ref="singleTable"
        highlight-current-row
        @current-change="handleCurrentChange"
        style="width: 100%">

      <el-table-column
          prop="eventTimeValue"
          label="触发方式"
          width="250">
        <template slot-scope="scope">{{ scope.row.eventTimeValue }}</template>
      </el-table-column>
      <el-table-column
          prop="eventTypeValue"
          label="事件类型"
          width="200">
        <template slot-scope="scope">{{ scope.row.eventTypeValue }}</template>
      </el-table-column>
      <el-table-column
          prop="eventObj"
          label="事件对象"
          width="300">
        <template slot-scope="scope">{{ scope.row.eventObj }}</template>
      </el-table-column>
    </el-table>
    <div style="margin-top:10px;">
      <el-button type="primary"  size="small" @click="add">添加</el-button>
      <el-button type="primary"  size="small" @click="update">修改</el-button>
      <el-button type="primary"  size="small" @click="remove">删除</el-button>
    </div>
    <AddEvent ref="addEvent" :eventTimes="eventTimes" :eventTypes="eventTypes" :processEventTimes="processEventTimes" @success="addEventRecord"></AddEvent>
    <UpdateEvent ref="updateEvent" :eventTimes="eventTimes" :eventTypes="eventTypes" :processEventTimes="processEventTimes" @success="updateEventRecord"></UpdateEvent>
  </div>

</template>
<script>
import AddEvent from './AddEvent.vue';
import UpdateEvent from './UpdateEvent.vue';
import { utils } from '../../utils/common.js'
export default {
  props:[
      "parentNode",
      "process"
  ],
  components:{
    AddEvent,
    UpdateEvent
  },
  data(){
    return {
      node:{},
      labelPosition:'right',
      eventConfigs:[
      ],
      nowEventConfig:{},
      //事件触发 TASK_ARRIVE|TASK_END_|TASK_BE_REJECT|REJECT_NOW_TASK
      eventTimes:[
        {
          value: 'TASK_ARRIVE',
          label: '当任务到达时'
        },{
          value: 'TASK_END',
          label: '当任务结束时'
        },{
          value: 'TASK_BE_REJECT',
          label: '当任务被退回时'
        },{
          value: 'REJECT_NOW_TASK',
          label: '当退回到当前任务时'
        },
      ],
      processEventTimes:[
        {
          value: 'PROCESS_START',
          label: '当流程启动时'
        },{
          value: 'PROCESS_END',
          label: '当流程结束时'
        },{
          value: 'PROCESS_TERMINATION',
          label: '当流程终止时'
        },{
          value: 'PROCESS_CANCEL',
          label: '当流程撤销时'
        },
      ],
      //事件类型 READ_NODE 发送备案|AUTO_EXEC 自动处理
      eventTypes:[
        {
          value: 'READ_NODE',
          label: '发送备案'
        },{
          value: 'AUTO_EXEC',
          label: '自动处理'
        }
      ]
    }
  },
  created(){
  },
  computed:{
    eventConfigTable(){
      let newTab =  this.eventConfigs.map(config=>({
        eventTimeValue: this.node.type === 'process' ? this.processEventTimes[this.processEventTimes.findIndex(obj=>obj.value === config.eventTime)].label :
            this.eventTimes[this.eventTimes.findIndex(obj=>obj.value === config.eventTime)].label,
        eventTypeValue: this.eventTypes[this.eventTypes.findIndex(obj=>obj.value === config.eventType)].label,
        eventObj:config.eventType === 'READ_NODE' ? config.userConfigList[0].approveUserValue : config.interName,
        cid: config.cid == null || config.cid === '' ? config.eventId : config.cid,
      }));
      return newTab;
    },
  },
  methods:{
    showPro(node){
      this.node = node;
      let config = node.eventConfigs;
      this.eventConfigs = config == null ? [] : config;
      this.eventConfigs.forEach(config=>{
        this.analysisUserName(config.userConfigList);
        config.cid = config.eventId;
      })
    },
    handleCurrentChange(row){
      this.nowEventConfig = row;
    },
    add(){
      this.$refs["addEvent"].showDialog(this.node);
    },
    update(){
      if(this.nowEventConfig == null){
        return;
      }
      let eventConfig = this.eventConfigs[this.eventConfigs.findIndex(config=>config.cid === this.nowEventConfig.cid)]
      this.$refs["updateEvent"].showDialog(eventConfig,this.node);
    },
    remove(){
      if(this.nowEventConfig == null){
        return;
      }
      let index = this.eventConfigs.findIndex(config=>config.cid === this.nowEventConfig.cid);
      this.eventConfigs.splice(index,1);
    },
    addEventRecord(row){
      this.eventConfigs.push(row);
      this.setEventConfigs();
    },
    updateEventRecord(row){
      let index = this.eventConfigs.findIndex(config=>config.cid === row.cid);
      this.eventConfigs[index] = row;
      this.eventConfigs = utils.getCloneObj(this.eventConfigs);
      this.setEventConfigs();
    },
    setEventConfigs() {
      if (this.node.type === 'process') {
        this.process.eventConfigs = this.eventConfigs;
      } else {
        this.parentNode.eventConfigs = this.eventConfigs;
      }
    },

    analysisUserName(userList) {
      if(userList == null){
        return;
      }
      userList.forEach(config => {
        if(config.useDir == null || config.useDir === ''){
          config.useDir = 'INCLUDE';
        }
        if(config.eventId != null && config.eventId !== ''){
          config.cid = config.eventId;
        }
        config.approveUserValue = config.approveUser;
        let userType = config.userType;
        if(userType === 'ACCOUNT'){
          config.approveUserValue = JSON.parse(config.approveUser).username;
        }else if(userType === 'VARIABLE'){
          config.approveUserValue = "变量用户: "+config.approveUserValue;
        }else if(userType === 'NODE_APPROVE'){
          config.approveUserValue = "某个节点审批人";
        }else if(userType === 'ALL_APPROVE'){
          config.approveUserValue = "所有流程审批人";
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>